{% set current = 'home' %} {% extends 'layouts/basic.html' %} {% block styles %}
<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-anchor: middle;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
</style>
{% endblock %} {% block body %}
<main class="site-main" role="main">
  <section class="jumbotron text-center">
    <div class="container">
      <h1 class="jumbotron-heading">{{ pkg.name | upper }}</h1>
      <p class="lead text-muted">{{ pkg.description }}</p>
      <p>
        <a href="{{ pkg.homepage }}" class="btn btn-primary my-3"
          >Getting started</a
        >
      </p>
    </div>
  </section>

  <div class="py-5 bg-light">
    <div class="container">
      <div class="row">
        {% for item in [1, 2, 3, 4, 5, 6] %}
        <div class="col-md-6 col-lg-4">
          <div class="card mb-4 shadow-sm">
            <svg
              class="bd-placeholder-img card-img-top"
              width="100%"
              height="225"
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
              role="img"
              aria-label="Placeholder: Thumbnail"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#55595c" />
              <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
            </svg>
            <div class="card-body">
              <p class="card-text">
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </p>
              <div class="d-flex justify-content-between align-items-center">
                <span class="btn-group">
                  <button
                    type="button"
                    class="btn btn-sm btn-outline-secondary"
                  >
                    View
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-outline-secondary"
                  >
                    Edit
                  </button>
                </span>
                <small class="text-muted">{{ item }} mins</small>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</main>
{% endblock %} {% block scripts %}
<script>
  console.log('page builtin scripts')
</script>
{% endblock %}
